<template>
    <!-- 已登录 -->
    <div v-if="isLogin">
        <!-- 用户信息 -->
        <van-cell center class="member">
            <template #icon>
                <!-- 直接使用本地图片作为头像 -->
                <van-image :src="avatar" width="80px" round></van-image>
            </template>
            <template #title>
                <span class="title">{{ user.name }}</span>
            </template>
        </van-cell>
        <!-- 用户课操作功能列表 -->
        <van-cell v-for="(item, i) of cellItems" :key="i" :icon="item.img" :title="item.title" is-link
                  :to="{name:item.name}" />
        <van-cell @click="onClickLogout" icon="user-o" title="退出登录" is-link />
    </div>
    <!-- 未登录 -->
    <div v-else>
        <!-- 用户信息 -->
        <van-cell center class="member" is-link to="login">
            <template #icon>
                <van-image :src="avatar_default" width="80px"></van-image>
            </template>
            <template #title>
                <span class="title">登录 / 注册</span>
            </template>
        </van-cell>
    </div>
</template>

<script>
// Vue3 + vite 加载图片资源
import avatar_default from "@/assets/images/avatar_default.png";
// 引入 001.png 图片
import defaultLoggedInAvatar from "@/assets/images/001.png";
import { useUserStore } from '@/stores/user.js';
const userStore = useUserStore();

export default {
    data() {
        return {
            user: {},
            avatar_default: avatar_default,
            // 使用 001.png 作为已登录时的头像
            avatar: defaultLoggedInAvatar,
            isLogin: false,
            cellItems: [
                {
                    title: "我的订单",
                    name: "orderList",
                    img: "orders-o",
                },
                {
                    title: "收货地址",
                    name: "addressList",
                    img: "envelop-o",
                },
                {
                    title: "我的收藏",
                    name: "working",
                    img: "point-gift-o",
                },
                {
                    title: "个人资料",
                    name: "profile",
                    img: "user-o",
                },
                {
                    title: "修改密码",
                    name: "updatePwd",
                    img: "records",
                },
            ],
        };
    },

    //初始页面数据
    mounted() {
        this.user = userStore.theUser;
        // 判断是否用户登录，看Token是否为空
        let token = userStore.theToken;
        this.isLogin = token ? true : false;
    },

    methods: {
        //点击用户退出事件
        onClickLogout() {
            userStore.logout();
            this.avatar = this.avatar_default;
            showToast("退出成功");
            this.isLogin = false;
        },
    },
};
</script>

<style lang="less" scoped>
.member {
    margin-top: 15px;
    padding: 10px;
    background: linear-gradient(90deg, #28a2ff, #ffd787);
    box-shadow: 0 0.1rem 0.25rem #f8e3c6;
}

.title {
    padding-left: 20px;
    font-size: 24px;
    color: rgb(65, 16, 241);
}
</style>